<template>
  <div id="header">
    <el-row :gutter="10">
      <el-col :span="2">
        <div class="grid-content">{{ $t('Header.Line') }}</div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">{{ props.wgName }}</div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content">
          {{ $t('Header.Speedmotion') }}({{ props.soLength }})
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content">{{ $t('Header.Date') }}:</div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">{{ props.dateString }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  wgName: string;
  dateString: string;
  soLength: number;
}
const props = defineProps<IProps>();
</script>

<style scoped lang="scss">
div#header {
  height: 100%;
}
.grid-content {
  text-align: center;
  font-size: xx-large;
  color: #ffffff;
  vertical-align: baseline;
  background-color: #1a1a5f;
}
</style>
